<script  setup>
import { getChatInfoAPI } from '@/apis/chatAPI'
import { onMounted, ref } from 'vue'
const chatInfoList = ref([])
const getChatInfo = async () => {
  const res = await getChatInfoAPI()
  chatInfoList.value = res.data
}
onMounted(() => getChatInfo())

</script>

<template>
  <ul infinite-scroll-immediate="true" class="infinite-list" style="overflow: auto">
    <li v-for="i in chatInfoList" :key="i.friend" class="infinite-list-item">
      <RouterLink active-class="active" :to="`/chat/list/${i.friendId}`">
        <!-- 头像 -->
        <div class="luyou">
          <div class="demo-fit">
            <div class="block">
              <el-avatar shape="square" :size="50" :src="i.head" />
            </div>
          </div>
          <p>{{ i.friendNodes }}</p>
          <div class="time">
            {{ i.lastChatTime }}
            <div class="del">X</div>
          </div>
        </div>
      </RouterLink>
    </li>
  </ul>
</template>


<style scoped lang="scss">
.infinite-list {

  height: 100vh;
  padding: 0;
  margin: 0;
  list-style: none;

  .infinite-list-item {

    // 路由跳转bug
    .luyou {
      width: 100%;
    }

    &:hover {
      background-color: pink;
    }


    border: 1px solid #0e74bc;
    position: relative;
    line-height: 5vw;
    height: 5vw;
    background:#49d590;
    margin: 0;
    color: var(--el-color-primary);

    p {
      display: inline-block;
      margin-left: 4.5vw;
      font-size: large;
      color: #000;
    }

    &:hover {
      .time {
        .del {
          opacity: 1;
        }
      }
    }

    .time {
      position: absolute;
      right: .5vw;
      top: 0;
      font-size: .7vw;

      .del {
        position: absolute;
        right: 0;
        top: -1.6vw;
        font-size: 1vw;
        color: #fff;
        opacity: 0;
      }
    }

  }
}


.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}

/* 头像 */
.demo-type>div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.demo-fit {
  position: absolute;
  top: 1vw;
  left: 1vw;
}
</style>
